<template>
    <div class="login__container">
        <div class="login__left"></div>
        <el-form :model="loginform"
        status-icon
        :rules="rules" 
        ref="loginform" 
        label-width="100px" 
        class="login_form">
            <h1>项目管理系统</h1>
            <!-- 用户名 -->
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="loginform.username" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginform.password" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item label="验证码"
                        prop="captcha">
            <el-input type="text"
                        class="captcha"
                        v-model="loginform.captcha"
                        autocomplete="off"
                        @keydown.native.enter="submitForm('loginform')"
                        ></el-input>
            <span class="captcha-svg"
                    @click="refreshCaptcha"
                    v-html="captchaSvg">12321312</span>
            </el-form-item>
            <!-- 登陆按钮 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm('loginform')">登陆</el-button>
            </el-form-item>
            <div class="login_wx">
            </div>
        </el-form>
            <video src="../../../image/bg_video.d2d602a9.mp4" muted autoplay loop preload="auto" class="bg_video"></video>
    </div>
</template>
<script>
import allRoutes from "@/router/allRoutes"
import recursionRoutes from "../../utils/recursionRoutes"
  import { getCaptcha, verifyCaptcha, login,getMenuList } from "@/api"
  //登入逻辑的实现
  //1.收集用户输入的username&password传递给后端

  //2.登入通过后,将后端返回的token存到本地,跳转到主页

  //3.每次请求的时候,携带token到请求头authorization

  //4.展示token校验正确的数据

  //5.校验不通过,跳转到登入页
export default {
    data() {
        //校验用户名
      var validateUsername = (rule, value, callback) => {
        // let regExp=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._-]){3,15}$/
        // if(regExp.test(value)){
        //     callback()
        // }else{
        //     callback('用户名，只能输入以字母开头的4-16位(字母、数字、下划线、减号)')
        // }

        if (!value) {
            console.log(123)
            callback(new Error('请输入用户名4到16位'))
        } else {
            callback()
        }
      };
        //校验密码
      var validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }else {
          callback();
        }
      };
      var validateCaptcha = (rule,value,callback) =>{
          if(value===""||value.length !==5){
              callback(new Error('请输入验证码'))
          }else{
              callback()
          }
      }
      return {
          captchaSvg:"",
        loginform: {
            username:"",
            password:"",
            captcha:""
        },
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          captcha:[
              {validator:validateCaptcha,trigger:'bulr'}
          ]
        }
      };
    },
    mounted () {
        //获取验证码
        this.getCaptchaCode()
    },
    methods: {
        refreshCaptcha(){//刷新验证码
            this.getCaptchaCode()
        },
        //获取验证码
        getCaptchaCode(){
            //调用http方法
            getCaptcha()
                .then(res=>{
                    console.log(res);
                    this.captchaSvg=res.data.img
                })
        },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {//本地表单校验通过
            //先校验验证码
            verifyCaptcha(this.loginform.captcha)
                .then(res=>{
                    if(res.data.state){
                        //打开加载动画
                        const loading = this.$loading({
                        lock: true,
                        text: 'Loading.....',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                        });
                    //验证码正确=>校验用户名和密码
                    let {username,password} = this.loginform;
                    login(username,password)
                        .then(res=>{
                        //关闭加载动画
                        loading.close()
                            // console.log(res);
                            if(res.data.state){
                                //用户名密码正确
                                let {permission,token,userInfo}=res.data
                                //将token存储到本地
                                localStorage.setItem("pm-token",token)

                                //获取用户的权限菜单
                                // getMenuList()
                                //     .then((res)=>{
                                //         console.log(res.data);
                                //         recursionRoutes(res.data.menuList,allRoutes)
                                //     })
                                this.$store.dispatch("FETCH_MENULIST")
                                .then(()=>{
                                    console.log(111);
                                })

                                //跳转到首页
                                this.$router.push("/")
                            }else{
                                //用户名密码错误
                                this.$message.error("用户名密码错误")
                            }
                        })
                    }else{
                    //验证码错误=>返回错误信息
                    this.getCaptchaCode()
                    this.$message.error('验证码错误');
                    loading.close();
                    }
                })


          } else {//本地表单不通过，后台打印错误
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>
<style scoped lang="scss">
    /*  写法一  /deep/   深度选择器 */
    // .login__container 
    // ::v-deep .el-input__inner{
    //     width: 200px;
    // }
    
    // /*写法二 >>> 不适合在scss里面使用
    // .login__container >>> .el-input__inner{
    // width: 200px !important;
    // } */
    
    // 写法三
    // .login__container /deep/ .el-input__inner{
    // width: 200px !important;
    // }
    html{
        font-size: 15.625vw;
    }
    .login__container{
        width: 100%;
        height: 100%;
        // background-color: pink;
        position: absolute;
        overflow: hidden;
    }
    .login__left{
        width: 50%;
        height: 100%;
        background: url(../../../image/bg2.fc58c850.png) no-repeat 60% 65%/50%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.7;
        z-index: 8;

    }
    .login__container
    ::v-deep .el-form{
        width: 25rem;
        height: 30rem;
        background-color: rgba($color: #000000, $alpha: 0.3);
        position: absolute;
        right: 10%;
        top: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        text-align: center;
        color: whitesmoke;
        border-radius: 0.7rem;
        z-index: 9;
    }
    .login__container 
    ::v-deep .el-form-item__label{
        color: whitesmoke;
        text-align: center;
    }
    .login__container 
    ::v-deep .el-input__inner{
        width: 15rem;
    }
    .login__container 
    ::v-deep .el-button{
        width: 15rem;
    }
    .login__container 
    ::v-deep .bg_video{
    position: absolute;
    left: 0;
    top: 0;
    }
    .login__container
    ::v-deep .login_wx{
        background-color: #ccc;
        width: 4rem;
        height: 4rem;
        position: absolute;
        right: -0.1rem;
        top: -0.1rem;
    }
    .login__container
    ::v-deep .captcha-svg{
        background-color: rgb(199, 33, 143);
    }
</style>